<!-- 挖矿linux -->
<template>
  <div class="pag" >
<!--    <cube-popup type="my-popup" ref="rule-active" maskClosable v-show="showRule">-->
<!--      <div class="active-ct">-->
<!--        <div class="content">-->
<!--          <cube-scroll ref="rule-active-scroll" style="background:#fff;border-radius:6px;">-->
<!--            <a @touchstart="" href="javascript:void(0);">-->
<!--              <img :src="activeImg" alt="" @load="refreshImg(2)" />-->
<!--            </a>-->
<!--          </cube-scroll>-->
<!--        </div>-->
<!--        <div class="close" @click="closeActive(2)">我已了解</div>-->
<!--      </div>-->
<!--    </cube-popup>-->
<!--    <cube-popup type="my-popup" ref="ads-active" maskClosable v-show="showAds">-->
<!--      <div class="active-ct">-->
<!--        <div class="content">-->
<!--          <cube-scroll ref="look-active-scroll" style="background:#fff;border-radius:6px;">-->
<!--            <a @touchstart="" href="javascript:void(0);">-->
<!--              <img :src="activeImg" alt="" @load="refreshImg(1)" />-->
<!--            </a>-->
<!--          </cube-scroll>-->
<!--        </div>-->
<!--        <div class="close" @click="closeActive(1)">我已了解</div>-->
<!--      </div>-->
<!--    </cube-popup>-->
    <div class="banner">
      <div class="b-title">
        <img src="~assets/images/miningboard/router.png" alt="">
        <div>
          <p>路由器挖矿数据看板</p>
<!--          <div @click="lookActive(2)">查看规则</div>-->
          <div @click="showGraphic(routerRule)">查看规则</div>
        </div>
      </div>
    </div>
    <div class="no-result-wrapper" v-if="noResult">
        <div class="no-result">
          <img src="~assets/images/miningboard/unstarted.png" alt="">
          <h3>尚未开启路由器挖矿</h3>
        </div>
    </div>
    <div class="data-board" v-if="routerList.length > 0">
      <div class="data-head">
        <div>
          <p>令牌质押数量</p>
          <div>{{tokenNum | numAddSepFixed}}</div>
        </div>
        <p class="s-split"></p>
        <div>
          <p>挖矿节点/绑定节点</p>
          <div>{{routerMiningCount}}/{{routerCount}}</div>
        </div>
<!--        <p class="s-split"></p>-->
<!--        <div>-->
<!--          <p>单个节点质押</p>-->
<!--          <div v-if="averageDeposit >= 3000" style="color:#00A989;">{{averageDeposit | numAddSepFixed}}</div><div class="unmatched" v-else>{{averageDeposit | numAddSepFixed}}<span>(未满足)</span></div>-->
<!--        </div>-->
      </div>
      <div class="data-body">
        <div class="data-row">
          <div class="data-cell">
            <p>今日预计收益</p>
            <div>0CVNT</div>
            <!-- 按产品要求改 <div>{{todayCvnt}}CVNT</div>-->
          </div>
          <div class="data-cell">
            <p>今日贡献流量</p>
            <div>{{todayUpload}}</div>
          </div>
        </div>
        <div class="data-row">
          <div class="data-cell">
            <p>累积获得</p>
            <div>{{routerCvnt}}CVNT</div>
          </div>
          <div class="data-cell">
            <p>累积贡献</p>
            <div>{{totalUpload}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="router-info" v-if="routerList.length > 0">
      <div class="router-it">
        <div>已绑定第三批路由器</div>
        <p>{{ batchNum }}台</p>
      </div>
      <div class="m-split"></div>
      <div class="router-it">
        <div>
          预计本月发放&nbsp;&nbsp;
          <div class="tag success" v-if="batchStatus == 1">已发放</div>
          <div class="tag danger" v-if="batchStatus == 0">未发放</div>
        </div>
        <p>{{ batchNum * 200 }}CVNT</p>
      </div>
    </div>
    <div class="node-list" v-if="routerList.length > 0">
      <div class="node-head">
        <h3>节点列表<img src="~assets/images/miningboard/fq.png" alt="" @click="showGraphic(routerNodeImg)"></h3>
        <p>*若单个节点在线时长低于20小时则没有收益不按预计获得发放</p>
      </div>
      <div class="node-body">
        <div class="tb-head">
          <div class="tb-cell">序号</div>
          <div class="tb-cell">设备名称</div>
          <div class="tb-cell">今日贡<br>献流量</div>
          <div class="tb-cell">
            今日预<br>计获得
          </div>
          <div class="tb-cell">今日在<br>线时长</div>
        </div>
        <div class="tb-body" style="position:relative;">
          <div class="tb-row" v-for="(item, index) in routerList" @click="goDetail(item)">
            <div class="tb-cell">{{routerCount - index}}</div>
            <div class="tb-cell router-name">
              <div>
                <p>{{item.name}}</p>
                <div v-if="item.status == 0" class="tag unstarted">未开启</div>
                <div v-if="item.status == 1" class="tag running">运行中</div>
                <div v-if="item.status == 2" class="tag checking">审核中</div>
                <div v-if="item.status == 3" class="tag stopped">已停止</div>
                <img class="storage" v-if="item.hasStorage == 2" src="~assets/images/miningboard/yes.png" alt="" />
                <img class="storage" v-if="item.hasStorage == 1" src="~assets/images/miningboard/no.png" alt="" />
                <img class="storage" v-if="item.hasStorage == 3 || item.hasStorage == 4" src="~assets/images/miningboard/bad.png" alt="" />
              </div>
            </div>
            <div class="tb-cell">{{item.up}}</div>
            <div class="tb-cell">{{item.cvnt | numAddSepFixed2}}CVNT</div>
            <div class="tb-cell" :class="{'success': item.onlineTime >= 20, 'failure': item.onlineTime < 20}"><span>{{item.onlineTime}}h</span></div>
          </div>
<!--          <load-more :onLoadMore="onLoadMore" :enableLoadMore="enableLoadMore">-->
<!--            <div class="tb-row" v-for="(item, index) in routerList" @click="goDetail(item)">-->
<!--              <div class="tb-cell">{{routerCount - index}}</div>-->
<!--              <div class="tb-cell router-name">-->
<!--                <div>-->
<!--                  <p>{{item.name}}</p>-->
<!--                  <div v-if="item.status == 0" class="tag unstarted">未开启</div>-->
<!--                  <div v-if="item.status == 1" class="tag running">运行中</div>-->
<!--                  <div v-if="item.status == 2" class="tag checking">审核中</div>-->
<!--                  <div v-if="item.status == 3" class="tag stopped">已停止</div>-->
<!--                  <img class="storage" v-if="item.hasStorage == 2" src="~assets/images/miningboard/yes.png" alt="" />-->
<!--                  <img class="storage" v-if="item.hasStorage == 1" src="~assets/images/miningboard/no.png" alt="" />-->
<!--                  <img class="storage" v-if="item.hasStorage == 3 || item.hasStorage == 4" src="~assets/images/miningboard/bad.png" alt="" />-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="tb-cell">{{item.up}}</div>-->
<!--              <div class="tb-cell">{{item.cvnt | numAddSepFixed2}}CVNT</div>-->
<!--              <div class="tb-cell" :class="{'success': item.onlineTime >= 20, 'failure': item.onlineTime < 20}"><span>{{item.onlineTime}}h</span></div>-->
<!--            </div>-->
<!--          </load-more>-->
        </div>
      </div>
    </div>
    <cube-loading class="list-loading" :class="{hide: !isListLoading}"></cube-loading>
  </div>

</template>

<script>
    import {miningInfo, miningRouterList} from 'api/register';
    // import LoadMore from 'cpnts/LoadMore'
    var uid;
    var token;

    export default {
        // components: {
        //   'load-more': LoadMore
        // },
        data() {
            return {
                isListLoading: false,
                batchStatus: '',
                batchNum: 0,
                routerNodeImg: require('assets/images/miningBoard/exp.png'),
                routerRule: require('assets/images/miningBoard/rule.png'),
                uid: '',
                token: '',
                source: 3,
                activeImg: '',
                noResult: false,
                showAds: false,
                showRule: false,
                routerList: [],
                tokenNum: 0,
                pledgeCvnt: '0',
                routerCount: '0',
                routerCvnt: '--',
                routerMiningCount: '--',
                todayCvnt: '--',
                todayUpload: '--',
                totalUpload: '--',
                averageDeposit: 0,
                per: 20,
                page: 1,
                sw: true,
                options: {
                  click: true,
                  tap: true,
                  pullUpLoad: {
                    threshold: 0,
                    txt: {
                      more: '上拉加载更多',
                      noMore: '没有更多数据了'
                    }
                  }
                },
                enableLoadMore: true
            }
        },
        mounted(){
            this.$eventBus.$on('onPullup', (index)=>{
                //console.log(index)
                if(index == 1){
                    this.onPullup()
                }
            })
        },
        beforeRouteEnter (to, from, next) {
            uid = to.query.uid;
            token = to.query.token;
            next((vm) => {
              let query = to.query;
              Object.assign(vm, query);
              //vm.routerList = []
              vm.options.pullUpLoad = {
                threshold: 0,
                txt: {
                  more: '上拉加载更多',
                  noMore: '没有更多数据了'
                }
              };
              vm.page = 1;
              vm.sw = true;
              //console.log(vm.uid, vm.token);
              vm.getMiningInfo();
                vm.onPullup()
                if(!vm.routerList.length){
                    vm.$loading()
                }
            })
        },
        methods: {
            async miningRouterList() {
                let {uid, token} = this
                try {
                    let {data} = await miningRouterList(uid, token, this.source, 20 , 1)
                    if (data) {
                        this.routerList = data
                    }else{
                        this.noResult = true
                    }
                    this.$loadingHide()
                    return data
                } catch (e) {
                    this.$loadingHide()
                    this.$warn(e.info || '请求超时')
                }
            },
            async onPullup(){
                let me = this
                let {uid, token} = this
                if(this.isListLoading){
                    return
                }
                let pageSize = 20

                if(this.routerList.length < pageSize){
                    await this.miningRouterList()
                    this.isListLoading = false
                    return
                }
                this.isListLoading = true
                // this.list.length > 50
                let pagec = Math.floor((this.routerList.length - pageSize) / pageSize) + 1
                let pagey = (this.routerList.length - pageSize) % pageSize

                try {
                    let {data} = await miningRouterList(uid, token, this.source, pageSize, 1 + pagec)
                    this.isListLoading = false
                    if(data){
                        if(pagey){
                            data.splice(0, pagey)
                        }
                        me.routerList = me.routerList.concat(data)
                    }
                }catch (e) {
                    this.$warn(e.info)
                    this.isListLoading = false
                }

            },
            showGraphic(url){
                this.$parent.showGraphic(url)
            },
            goDetail(item){
                this.$router.push({path: '/nodeDetail', query: {
                        nodeId: item.nodeId,
                        status: item.status,
                        uid: this.uid,
                        token: this.token,
                        path: 'router'
                    }});
            },
          getMiningInfo() {
            miningInfo(this.uid, this.token, this.source).then((data) => {
              console.log(data);
              if (data.status && data.status == 1) {
                  this.tokenNum = data.data.tokenNum
                this.routerCount = data.data.routerCount;
                this.routerMiningCount = data.data.routerMiningCount;
                this.totalUpload = data.data.totalUpload;
                this.routerCvnt = data.data.routerCvnt;
                this.todayUpload = data.data.todayUpload;
                this.todayCvnt = data.data.todayCvnt;
                this.pledgeCvnt = data.data.pledgeCvnt;
                  this.batchStatus = data.data.batchStatus;
                  this.batchNum = data.data.batchNum;
                if (data.data.routerMiningCount == 0) {
                  this.averageDeposit = 0;
                } else {
                  this.averageDeposit = (Number(this.pledgeCvnt) / Number(this.routerMiningCount)).toFixed(2);
                  /*this.averageDeposit = Math.floor(Number(this.pledgeCvnt) / Number(this.routerMiningCount));*/
                }
              }
            }).catch((err) => {
              console.log(err);
              this.$warn(err.info);
            })
          },
          getMiningRouterList() {
            miningRouterList(this.uid, this.token, this.source, this.per, this.page).then((data) => {
                this.$loadingHide()
              if (data.status && data.status == 1) {
                if (data.data && data.data.length > 0) {
                  this.routerList = data.data;
                }
                if (!data.data || data.data == null || data.data.length == 0) {
                  this.noResult = true;
                  this.routerList = [];
                }
              }
            }).catch((err) => {
              //console.log(err);
              this.noResult = true;
                this.$loadingHide()
              this.$warn(err.info);
            })
          },
          onLoadMore(done) {
            this.page++;
            // alert('currentPage:' + this.page);
            if (this.sw) {
              miningRouterList(this.uid, this.token, this.source, this.per, this.page).then((data) => {
                // console.log(data);
                if (data.status && data.status == 1) {
                  if (data.data && data.data.length > 0) {
                    this.routerList = this.routerList.concat(data.data);
                    this.sw = true;
                  }
                  if (data.data == null || data.data.length == 0) {
                    this.enableLoadMore = false;
                    this.sw = false;
                    // this.options.pullUpLoad = false;
                    return;
                  }
                  done();
                }
              }).catch((err) => {
                this.$warn(err.info);
              })
            }
          },
          onPullingUp() {
            // console.log('上拉加载');
            this.page++;
            if (this.sw) {
              miningRouterList(this.uid, this.token, this.source, this.per, this.page).then((data) => {
                // console.log(data);
                if (data.status && data.status == 1) {
                  if (data.data.length > 0) {
                    this.routerList = this.routerList.concat(data.data);
                    this.sw = true;
                  }
                  if (data.data == null || data.data.length == 0) {
                    this.sw = false;
                    this.options.pullUpLoad = false;
                    return;
                  }
                }
              }).catch((err) => {
                this.$warn(err.info);
              })
            }
          },
          refreshImg(val) {
            if (val == 1) {
              this.$nextTick(() => {
                this.$refs['look-active-scroll'].refresh();
              })
            } else if (val == 2) {
              this.$nextTick(() => {
                this.$refs['rule-active-scroll'].refresh();
              })
            }
          },
          lookActive(val) {
            if (val == 1) {
              this.activeImg = require('assets/images/miningBoard/exp.png');
              this.$refs['ads-active'].show();
            } else if (val == 2) {
              this.activeImg = require('assets/images/miningBoard/rule.png');
              this.$refs['rule-active'].show();
            }
          },
          closeActive(val) {
            if (val == 1) {
              this.$refs['ads-active'].hide();
            } else if (val == 2) {
              this.$refs['rule-active'].hide();
            }
          }
        }
    }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {
    //height:100%;
  }

  .banner {
    height:358px;
    background:linear-gradient(210deg,rgba(73,189,250,1) 0%,rgba(43,117,243,1) 100%);
  }

  .b-title {
    padding: 24px 30px;
    display: flex;
    align-items: center;
    img {
      width: 174px;
      height: 174px;
      margin-right: 24px;
    }
    > div {
      > div {
        width:160px;
        height:56px;
        border:2px solid rgba(255,255,255,1);
        border-radius:28px;
        font-size:26px;
        color:rgba(255,255,255,1);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size:40px;
        font-weight:600;
        color:rgba(255,255,255,1);
        margin-bottom: 32px;
      }
    }
  }

   .data-board {
     width:690px;
     height:372px;
     background:rgba(255,255,255,1);
     box-shadow:0 1px 2px 0 rgba(10,29,87,0.2);
     border-radius:14px;
     margin: -136px 30px 24px 30px;
   }

    .data-head {
      padding: 40px 0;
      display: flex;
      align-items: center;
      > div {
        flex: 1;
        text-align: center;
        > p {
          font-size:24px;
          color:rgba(113,118,140,1);
          margin-bottom: 24px;
        }
        > div {
          font-size:40px;
          font-weight:600;
          color:rgba(32,44,91,1);
        }
        > div.unmatched{
          color:#DC0630;
          span{
            font-size:20px;
          }
        }
      }
    }

  .s-split {
    width:2px;
    height:90px;
    background:rgba(245,245,245,1);
  }

  .node-list {
    margin-bottom: 24px;
  }

  .data-body {

  }

  .data-row {
    height: 100px;
    border-top: 2px solid #F5F5F5;
    display: flex;
  }

  .data-cell {
    flex: 1;
    border-right: 2px solid #F5F5F5;
    padding: 19px 0 0 23px;
    &:last-of-type {
      border: none;
    }
    p {
      font-size:24px;
      color:rgba(113,118,140,1);
      margin-bottom: 14px;
    }
    div {
      font-size:26px;
      font-weight:600;
      color:rgba(32,44,91,1);
    }
  }

  .node-head {
    background: #fff;
    padding: 24px 30px;
    h3 {
      font-size:36px;
      font-weight:600;
      color:rgba(32,44,91,1);
      margin-bottom: 19px;
      display: flex;
      align-items: center;
      img {
        margin-left: 17px;
        width: 36px;
        height: 36px;
      }
      &::before {
        content: '';
        width:6px;
        height:36px;
        background:rgba(43,117,243,1);
        display: inline-block;
        margin-right: 16px;
      }
    }
    p {
      font-size:20px;
      color:rgba(113,118,140,1);
      line-height:33px;
    }
  }

  .node-body {
    color:rgba(32,44,91,1);
    font-size: 26px;
  }

  .tb-head {
    border-top: 2px solid #F5F5F5;
    height: 72px;
    font-size:24px;
    display: flex;
    line-height: 30px;
    padding-top: 8px;
    background: #fff;
    position: sticky;
    position: -webkit-sticky;
    top: -1px;
    z-index: 2;
  }

  .tb-row {
    background: #fff;
    height: 106px;
    display: flex;
    margin-top: 8px;
  }

  .tb-cell {

    display: flex;
    justify-content: center;
    align-items: center;
    &:nth-of-type(1) {
      width: 12%;
    }
    &:nth-of-type(2) {
      width: 25%;

      > p {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    &:nth-of-type(3) {
      width: 20%;
    }
    &:nth-of-type(4) {
      width: 30%;
    }
    &:nth-of-type(5) {
      width: 13%;
      span {
        font-weight: 600;
      }
    }
  }

  .success{
    color:#00A989;
  }
  .failure{
    color:#DC0630;
  }
  .tb-body {

  }

  .tag {
    width:76px;
    height:30px;
    line-height:30px;
    border-radius:4px;
    font-size:20px;
    font-weight:500;
    color:rgba(255,255,255,1);
    display:inline-block;
    text-align:center;
    /*display: flex;
    align-items: center;
    justify-content: center;*/
    margin-top: 10px;
    margin-right:8px;
    vertical-align: bottom;
    &.unstarted {
      background:#EB3257;
    }
    &.running {
      background:#10D592;
    }
    &.checking {
      background:rgba(247,163,16,1);
    }
    &.stopped {
      background:#697a9b;
    }
  }
  .storage{
    display:inline-block;
    width:22px;
    height:30px;
    margin-top: 10px;
    vertical-align:bottom;
  }
  /*.router-name{*/
  /*  justify-content: left;*/
  /*  p{*/
  /*    width:190px;*/
  /*    height:30px;*/
  /*    overflow:hidden;*/
  /*    text-overflow:ellipsis;*/
  /*    white-space:nowrap;*/
  /*  }*/
  /*}*/
  /*.active-ct{*/
  /*  width:92vw;*/
  /*  margin:0 auto;*/
  /*  background:#FFF;*/
  /*  position: relative;*/
  /*  z-index: 100;*/
  /*  .content{*/
  /*    background:#FFF;*/
  /*    !*margin:0 auto;*!*/
  /*    height:78vh;*/
  /*    padding:32px 25px 0;*/
  /*    margin-bottom:22px;*/
  /*    -webkit-overflow-scrolling: touch;*/
  /*    overflow:auto;*/
  /*    img{*/
  /*      display:block;*/
  /*      width:100%;*/
  /*      min-height:500px;*/
  /*      height:auto;*/
  /*      border-radius:6px;*/
  /*    }*/
  /*  }*/
  /*  .close{*/
  /*    padding:25px 0;*/
  /*    border-top:1px solid #F5F5FB;*/
  /*    font-size:34px;*/
  /*    color:#2B75F3;*/
  /*    text-align:center;*/
  /*    cursor:pointer;*/
  /*  }*/
  /*}*/

  .router-info {
    margin: 24px 30px;
    height:100px;
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(10,29,87,0.2);
    border-radius:14px;
    display: flex;
    align-items: center;
    padding-top: 10px;
  }

  .router-it {
    flex: 1;
    padding-left: 25px;
    > div {
      font-size:24px;
      color:rgba(113,118,140,1);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }
    > p {
      font-size:26px;
      font-weight:600;
      color:rgba(32,44,91,1);
    }
    .tag {
      color: #fff;
      margin: 0;
    }
  }

  .m-split {
    width:2px;
    height:68px;
    background:rgba(245,245,245,1);
  }







</style>
